<template>
  <el-card>
    <el-form label-width="80px">
      <el-row type="flex" justify="end">
        <el-button type="success" @click="$router.push('/questions/new')"
          ><i class="el-icon-edit"></i>新增试题</el-button
        >
      </el-row>
      <br />
      <el-row type="flex">
        <el-form-item label="学科">
          <el-select
            placeholder=""
            v-model="formData.subjectID"
            @change="changesub"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录">
          <el-select placeholder="" v-model="formData.catalogID">
            <el-option
              v-for="item in mulu"
              :key="item.id"
              :value="item.id"
              :label="item.directoryName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select placeholder="" v-model="formData.tags">
            <el-option
              v-for="item in tags"
              :key="item.id"
              :label="item.tagName"
              :value="item.tagName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字"
          ><el-input placeholder=""></el-input
        ></el-form-item>
      </el-row>

      <el-row type="flex">
        <el-form-item label="试题类型">
          <el-select placeholder="" v-model="formData.questionType">
            <el-option label="单选" :value="1"></el-option>
            <el-option label="多选" :value="2"></el-option>
            <el-option label="简单" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select placeholder="" v-model="formData.difficulty">
            <el-option label="简单" :value="1"></el-option>
            <el-option label="一般" :value="2"></el-option>
            <el-option label="困难" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select placeholder="" v-model="formData.fang">
            <el-option value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select placeholder="" v-model="formData.creatorID">
            <el-option :value="2" label="超级管理员"></el-option>
            <el-option :value="3" label="录入管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row type="flex">
        <el-form-item label="题目备注">
          <el-input placeholder="" v-model="formData.remarks"></el-input>
        </el-form-item>
        <el-form-item label="企业简称" class="qiye">
          <el-input placeholder="" v-model="formData.shortName"></el-input>
        </el-form-item>
        <el-form-item label="城市" class="chengshi">
          <el-row type="flex">
            <el-select
              placeholder=""
              style="width: 100px"
              v-model="formData.province"
              @change="citys"
            >
              <el-option
                v-for="val in oldcitys"
                :key="val"
                :label="val"
                :value="val"
              ></el-option>
            </el-select>
            &nbsp;
            <el-select
              placeholder=""
              style="width: 100px"
              v-model="formData.city"
            >
              <el-option
                v-for="val in newcitys"
                :key="val"
                :label="val"
                :value="val"
              ></el-option>
            </el-select>
          </el-row>
        </el-form-item>
        <el-form-item label="" class="anniu">
          <el-row type="flex" justify="end">
            <el-button type="">清除</el-button>
            <el-button type="primary" @click="initData">搜索</el-button>
          </el-row>
        </el-form-item>
      </el-row>
    </el-form>

    <el-alert :title="`一共${count}条数据`" type="info"> </el-alert>

    <el-table :data="list" border>
      <el-table-column label="试题编号" prop="number"></el-table-column>
      <el-table-column label="学科" prop="subject"></el-table-column>
      <el-table-column label="目录" prop="catalog"></el-table-column>
      <el-table-column label="题型" prop="questionType">
        <template slot-scope="{ row }">
          {{ row.questionType | tixing }}
        </template>
      </el-table-column>
      <el-table-column label="题干" prop="question">
        <template slot-scope="{ row }">
          <p v-html="row.question"></p>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" prop="addDate">
        <template slot-scope="{ row }">
          {{ row.addDate.slice(0, -14) }}
        </template>
      </el-table-column>
      <el-table-column label="难度" prop="difficulty">
        <template slot-scope="{ row }"> {{ row.difficulty | nandu }} </template>
      </el-table-column>
      <el-table-column label="录入人" prop="creator"> </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="{ row }">
          <el-button
            plain
            type="primary"
            size="small"
            circle
            @click="edit(row.id)"
            ><i class="el-icon-view"></i
          ></el-button>
          <el-button
            plain
            type="success"
            size="small"
            circle
            @click="updata(row.id)"
            ><i class="el-icon-edit"></i
          ></el-button>
          <el-button
            plain
            type="danger"
            size="small"
            circle
            @click="del(row.id)"
            ><i class="el-icon-delete"></i
          ></el-button>
          <el-button
            plain
            type="warning"
            size="small"
            circle
            @click="choice(row.id)"
            ><i class="el-icon-star-off"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row type="flex" justify="end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.page"
        :page-sizes="[5, 6, 7, 8]"
        :page-size="formData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count * 1"
      >
      </el-pagination>
    </el-row>

    <el-dialog title="提示" :visible.sync="isShow" >
      <el-form>
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="【题型】">{{
              queryData.questionType | tixing
            }}</el-form-item></el-col
          >
          <el-col :span="6"
            ><el-form-item :label="'【编号】' + queryData.id"></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="【题型】">{{
              queryData.difficulty | nandu
            }}</el-form-item></el-col
          >
          <el-col :span="6"
            ><el-form-item :label="'【标签】' + queryData.tags"></el-form-item
          ></el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item
              :label="'【学科】' + queryData.subjectName"
            ></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item
              :label="'【目录】' + queryData.directoryName"
            ></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item
              :label="'【方向】' + queryData.direction"
            ></el-form-item
          ></el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <hr />
        <el-row>
          <el-form-item label="">
            【题干】：
            <p v-html="queryData.question" class="kewup"></p>
            <div v-if="queryData.questionType === '1'" class="kewudiv">
              <p class="kewu">单选题选项：（以下选中的选项为正确选项）</p>
              <el-radio-group v-model="radio">
                <el-radio label="A"><span>{{queryData.options[0].title}}</span></el-radio>
                <el-radio label="B"><span>{{queryData.options[1].title}}</span></el-radio>
                <el-radio label="C"><span>{{queryData.options[2].title}}</span></el-radio>
                <el-radio label="D"><span>{{queryData.options[3].title}}</span></el-radio>
              </el-radio-group>
            </div>

            <div v-if="queryData.questionType === '2'" class="kewudiv">
              <p class="kewu">多选题选项：（以下选中的选项为正确选项）</p>
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="A">{{queryData.options[0].title}}</el-checkbox
                >
                <el-checkbox label="B">{{queryData.options[1].title}}</el-checkbox
                >
                <el-checkbox label="C">{{queryData.options[2].title}}</el-checkbox
                >
                <el-checkbox label="D">{{queryData.options[3].title}}</el-checkbox>
              </el-checkbox-group>
            </div>

            <div v-if="queryData.questionType === '3'">
              <p class="kewu">简答题选项：（以下选中的选项为正确选项）</p>
            </div>
          </el-form-item>
        </el-row>
        <hr />
        <el-row>
          <span
            >【参考答案】<el-button type="danger" @click="showvideo = true"
              >视频答案预览</el-button
            ></span
          ><br />
          <div>
            <video
              v-show="showvideo"
              :src="queryData.videoURL"
              controls
              width="400"
              height="200"
            ></video>
          </div>
          <hr>
        </el-row>
        <el-row>
            【答案解析】<p v-html="queryData.answer" class="kewup"></p>
          <hr />
            【题目备注】<p v-text="queryData.remarks" class="kewup"></p>
        </el-row>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="isShow=false">取消</el-button>
      </el-row>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getsubjectstagsApi,
  gettagslistApi,
  getdirectoryslistApi,
} from "@/api/lvweijie/questions";
import {
  getListAPI,
  delListAPI,
  editListAPI,
  choiceListApi,
} from "@/api/lvweijie/list";
import { provinces, citys } from "@/api/lvweijie/citys";
export default {
  name: "ListPage",
  data() {
    return {
      formData: {
        page: 1,
        pagesize: 5,
      },
      subject: [],
      tags: [],
      mulu: [],
      list: [],
      count: "",
      isShow: false,
      queryData: {},
      radio: "",
      oldcitys: [],
      newcitys: [],
      showvideo: false,
      checkList: [],
    };
  },
  created() {
    this.initData();
    this.provinces();
  },
  filters: {
    tixing(val) {
      if (val === "1") {
        return "单选";
      } else if (val === "2") {
        return "多选";
      } else {
        return "简答";
      }
    },
    nandu(val) {
      if (val === "1") {
        return "简单";
      } else if (val === "2") {
        return "一般";
      } else {
        return "困难";
      }
    },
  },
  methods: {
    async initData() {
      let { items } = await getsubjectstagsApi();
      this.subject = items;
      let res = await getListAPI(this.formData);
      this.list = res.items;
      this.count = res.counts;
    },
    async changesub() {
      let { items } = await gettagslistApi(this.formData.subjectID);
      this.tags = items;
      let res = await getdirectoryslistApi(this.formData.subjectID);
      this.mulu = res.items;
    },
    handleSizeChange(val) {
      this.formData.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.formData.page = val;
      this.initData();
    },
    async del(id) {
      await this.$confirm("确认删除吗");
      await delListAPI(id);
      this.$message.success("删除成功");
      this.initData();
    },
    async edit(id) {
      let res = await editListAPI(id);
      this.queryData = res;
      let arr = res.options.sort(function(a,b){
        return a.id-b.id
      });
      console.log(arr,'---------------------------');
      this.queryData.options=arr
      let index = arr.findIndex((item) => item.isRight === 1);
      this.radio = arr[index].code;
      arr.forEach((val, index1) => {
        if (val.isRight === 1) {
          this.checkList.push(arr[index1].code);
        }
        console.log(this.checkList);
      });
      this.isShow = true;
    },
    async updata(id) {
      this.$router.push({
        path: "/questions/new",
        query: {
          id: id,
        },
      });
    },
    async choice(id) {
      await this.$confirm("确认收藏吗");
      await choiceListApi(id);
      this.$message.success("收藏成功");
      this.initData();
    },
    async provinces() {
      this.oldcitys = await provinces();
    },
    citys(val) {
      this.newcitys = citys(val);
    },
  },
};
</script>

<style>
.qiye {
  margin-left: 13px;
}
.chengshi {
  margin-left: 15px;
}
.anniu {
  margin-left: 80px;
}
.el-dialog__header {
  background-color: rgb(64, 158, 255);
}
.el-dialog__title {
  color: #fff;
}
.el-icon-close {
  color: #fff;
}

.kewup{
  margin-left: 10px;
  color: rgb(64, 158, 255);
}

.kewudiv{
  margin-left: 10px;
}

.kewu{
  margin-left: -5px;
  font-weight: 700;
}

.el-icon-close:before{
  color: #fff;
}
</style>
